<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style lang="less">
    .TableBox {
        display: flex;
    }

    button {
        border: none;
        color: none;
    }

    .commonCss:not(:focus-within) {
        background-color: #ededed;
    }

    .table-A:focus-within,
    .table-B:focus-within {
        background-color: red;
    }

</style>

<body>
    <div class="TableBox">
        <button class="table-A commonCss">table-A</button>
        <button class="table-B commonCss">table-B</button>
    </div>
</body>

</html>